
<template>
  <div
    v-waterMarker="{
      text: 'Vicky',
      textColor: 'rgba(180, 180, 180, 0.4)',
    }"
  >
    <div class="container wrap">
      <div v-for="(item, index) in imgSrc" :key="index" class="imgBox">
        <img v-imgLazy="item" />
      </div>
    </div>
  </div>
</template>

<script>
import imgLazy from "@/directive/imgLazy/imgLazy.js";
import waterMarker from "@/components/waterMaker/index";
export default {
  directives: {
    imgLazy: imgLazy,
    waterMarker,
  },
  data() {
    return {
      imgSrc: [
        "https://img.zcool.cn/community/0134df5af3f792a801207ab4c3822a.jpg@1280w_1l_2o_100sh.jpg",
        "https://pic1.zhimg.com/v2-5d268ec9229b1f1c19536ae0396f4ab4_r.jpg",
        "https://img.99tu.com:9988/uploads/allimg/c201119/1605GTZa350-51R2.jpg",
        "https://img.tt98.com/d/file/96kaifa/2019052219083938/002.jpg",
        "https://c-ssl.dtstatic.com/uploads/item/202003/24/20200324215836_tZWh8.thumb.1000_0.jpeg",
        "http://pic1.win4000.com/wallpaper/b/590982e49baff.jpg",
        "http://pic1.win4000.com/wallpaper/b/5476e88235f23.jpg",
        "http://pic1.win4000.com/wallpaper/b/5476e87e6d29d.jpg",
        "http://pic1.win4000.com/wallpaper/c/576a512e5a1f9.jpg",
        "http://pic1.win4000.com/wallpaper/4/580ed079cdb2a.jpg",
        "http://pic1.win4000.com/wallpaper/4/580ecd99233af.jpg",
        "http://pic1.win4000.com/wallpaper/4/580ecd9ae98cf.jpg",
        "http://pic1.win4000.com/wallpaper/2020-04-08/5e8d342e0c1e6.jpg",
        "http://pic1.win4000.com/wallpaper/2020-04-08/5e8d342ec26e9.jpg",
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  border: thick double #eee;
  text-align: center;
  padding-top: 30px;

  .imgBox {
    display: inline-block;
    margin: 15px 15px;
  }
}
img {
  width: 500px;
  height: 300px;
  cursor: pointer;
  box-shadow: 10px 10px 5px #ccc;
}
</style>